<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我绑定的流程</title>
    <#include "/pubHeadStyle.html">
</head>
<body>
    <div class="layui-tab layui-tab-card" lay-filter="bindFlow">
        <ul class="layui-tab-title">
            <li class="layui-this">用户绑定</li>
            <li>角色绑定</li>
            <li>组织绑定</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <table id="bindFlowByUser" lay-filter="bindFlowByUser"></table>
            </div>
            <div class="layui-tab-item">
                <table id="bindFlowByRole" lay-filter="bindFlowByRole"></table>
            </div>
            <div class="layui-tab-item">
                <table id="bindFlowByOrg" lay-filter="bindFlowByOrg"></table>
            </div>
        </div>
    </div>

</body>
<script type="text/html" id="queryByUser">
    <div class="ccpui-enterSel">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="query">
                <i class="layui-icon layui-icon-search"></i>
                <span>查询</span>
            </a>
            <a class="layui-btn layui-btn-sm" lay-event="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                <span>重置</span>
            </a>
        </div>
    <form class="layui-form" action="" style="margin-top:10px" lay-filter="bindFlowQueryByUser">
        <div class="table-top-filter">
            <div class="table-filter-alone">
                <label class="layui-form-label">流程定义Key</label>
                <input type="text" name="Q_flowKey_SL" id="flowKey" class="layui-input filter-value" placeholder="流程定义Key"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label">流程标题</label>
                <input type="text" name="Q_flowName_SL" id="flowName" class="layui-input filter-value" placeholder="流程标题"/>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="queryByRole">
    <div class="ccpui-enterSel">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="query">
                <i class="layui-icon layui-icon-search"></i>
                <span>查询</span>
            </a>
            <a class="layui-btn layui-btn-sm" lay-event="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                <span>重置</span>
            </a>
        </div>
        <form class="layui-form" action="" style="margin-top:10px" lay-filter="bindFlowQueryByRole">
            <div class="table-top-filter">
                <div class="table-filter-alone">
                    <label class="layui-form-label">流程定义Key</label>
                    <input type="text" name="Q_flowKey_SL" id="flowKey" class="layui-input filter-value" placeholder="流程定义Key"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">流程标题</label>
                    <input type="text" name="Q_flowName_SL" id="flowName" class="layui-input filter-value" placeholder="流程标题"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">角色别名</label>
                    <input type="text" name="Q_roleAlias_SL" id="roleAlias" class="layui-input filter-value" placeholder="角色别名"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">角色名称</label>
                    <input type="text" name="Q_roleName_SL" id="roleName" class="layui-input filter-value" placeholder="角色名称"/>
                </div>
            </div>
        </form>
</script>
<script type="text/html" id="queryByOrg">
    <div class="ccpui-enterSel">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="query">
                <i class="layui-icon layui-icon-search"></i>
                <span>查询</span>
            </a>
            <a class="layui-btn layui-btn-sm" lay-event="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                <span>重置</span>
            </a>
        </div>
        <form class="layui-form" action="" style="margin-top:10px" lay-filter="bindFlowQueryByOrg">
            <div class="table-top-filter">
                <div class="table-filter-alone">
                    <label class="layui-form-label">流程定义Key</label>
                    <input type="text" name="Q_flowKey_SL" id="flowKey" class="layui-input filter-value" placeholder="流程定义Key"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">流程标题</label>
                    <input type="text" name="Q_flowName_SL" id="flowName" class="layui-input filter-value" placeholder="流程标题"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">组织代码</label>
                    <input type="text" name="Q_orgCode_SL" id="orgCode" class="layui-input filter-value" placeholder="组织代码"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">组织名称</label>
                    <input type="text" name="Q_orgName_SL" id="orgName" class="layui-input filter-value" placeholder="组织名称"/>
                </div>
            </div>
        </form>
</script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'table', 'setter','element','common','commons','form'], function(){
        var table = layui.table;
        var form = layui.form;
        var setter = layui.setter;
        var common = layui.common;
        var element = layui.element;
        // var commons = layui.commons;
        // var tableH=commons.tabHeight('full-70');

        //初始化<用户绑定>
        bindFlowByUser();

        //tab选项卡切换
        element.on('tab(bindFlow)', function(data){
            switch (data.index) {
                case 1 :
                    //角色查询
                    bindFlowByRole();
                    break;
                case 2 :
                    //组织查询
                    bindFlowByOrg();
                    break;
                default :
                    //用户查询
                    bindFlowByUser();
                    break;
            }
        });

        //查询流程<用户绑定>
        function bindFlowByUser() {
            table.render({
                elem: '#bindFlowByUser'
                , toolbar: '#queryByUser'
                , method:"post"
                , url: serverPath.workflowPath + setter.workflowLinkPath + "flowHandover/bindFlowByUser"
                , height: 'full-50'
                , page: true
                , cols: [[
                    {field: 'flowKey', title: '流程定义Key', align: "center", sort: true}
                    , {field: 'flowName', title: '流程标题', align: "center", sort: true}
                ]]
            });
        }
        //查询条件<用户绑定>
        table.on('toolbar(bindFlowByUser)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("bindFlowByUser", "bindFlowQueryByUser", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("bindFlowByUser", "bindFlowQueryByUser", {where: {}}, true);
                    break;
            }
        });

        //查询流程<角色绑定>
        function bindFlowByRole() {
            table.render({
                elem: '#bindFlowByRole'
                , toolbar: '#queryByRole'
                , method:"post"
                , url: serverPath.workflowPath + setter.workflowLinkPath + "flowHandover/bindFlowByRole"
                , height: 'full-50'
                , page: true
                , cols: [[
                    {field: 'flowKey', title: '流程定义Key', align: "center", sort: true}
                    , {field: 'flowName', title: '流程标题', align: "center", sort: true}
                    , {field: 'roleAlias', title: '角色别名', align: "center", sort: true}
                    , {field: 'roleName', title: '角色名称', align: "center", sort: true}
                ]]
            });
        }
        //查询条件<角色绑定>
        table.on('toolbar(bindFlowByRole)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("bindFlowByRole", "bindFlowQueryByRole", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("bindFlowByRole", "bindFlowQueryByRole", {where: {}}, true);
                    break;
            }
        });

        //查询流程<组织绑定>
        function bindFlowByOrg() {
            table.render({
                elem: '#bindFlowByOrg'
                , toolbar: '#queryByOrg'
                , method:"post"
                , url: serverPath.workflowPath + setter.workflowLinkPath + "flowHandover/bindFlowByOrg"
                , height: 'full-50'
                , page: true
                , cols: [[
                    {field: 'flowKey', title: '流程定义Key', align: "center", sort: true}
                    , {field: 'flowName', title: '流程标题', align: "center", sort: true}
                    , {field: 'orgCode', title: '组织代码', align: "center", sort: true}
                    , {field: 'orgName', title: '组织名称', align: "center", sort: true}
                ]]
            });
        }
        //查询条件<用户绑定>
        table.on('toolbar(bindFlowByOrg)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("bindFlowByOrg", "bindFlowQueryByOrg", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("bindFlowByOrg", "bindFlowQueryByOrg", {where: {}}, true);
                    break;
            }
        });
    })
</script>
</html>